<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<!-- 头部菜单 -->
<div class="aui-tab" id="tab">
    <div class="aui-tab-item"><a id="tophome" href="${ctx}/we/index">首页</a></div>
    <div class="aui-tab-item"><a id="topactive" href="${ctx}/we/product/active">活动专区</a></div>
    <s:channel code="009">
        <div class="aui-tab-item"><a id="top${code }"
                                     href="${ctx}/we/product/wesubject?channelcode=${code }">${name }</a> <span></span>
        </div>
    </s:channel>
</div>
<script>

    function initTab() {
        var dom = document.getElementById("tab");
        var window_wid = $(window).width(); // 屏幕的宽度
        var wid = dom.scrollWidth;  // tab 的实际宽度
        var wid2 = parseInt($("#tab").css("width")); //tab 的可见宽度
        var left = parseInt($("#tab").css("left"));//css left的值
        var startX = endX = S_distance = width = left_s = 0;

        //touchStart事件
        dom.addEventListener('touchstart', function (event) {
            var touch = event.targetTouches[0];
            startX = touch.clientX;
        }, false);

        //touchmove事件
        dom.addEventListener('touchmove', function (event) {
//            $("#tab").css({"-moz-transition" : "", "-webkit-transition" : "", "-o-transition" : "", "transition" : ""});
            var touch = event.targetTouches[0];
            endX = touch.clientX;
            S_distance = endX - startX; //滑动的数值
            console.log(S_distance);
            left_s = left + S_distance; //css 换算后left 的值
            width = wid2 - left_s;

            if (left_s > 0) {
                left_s = 0;
                width = window_wid;
                $("#tab").css("left", left_s);
                $("#tab").css("width", width);
            } else if (left_s < -(wid - window_wid)) {
                left_s = -(wid - window_wid);
                width = wid;
                $("#tab").css("left", left_s);
                $("#tab").css("width", width);
            } else {
                $("#tab").css("left", left_s);
                $("#tab").css("width", width);
            }

        }, false);
        //touchend事件
        dom.addEventListener('touchend', function () {
            left = left_s;
        }, false);


        var wid_div = $(".aui-active").outerWidth(true); // div的宽度
        var wid_left = $(".aui-active").offset().left; //选中的div离屏幕左边的距离
        var numerical = wid_div / 2 + (wid_left - window_wid / 2);

        left = left - numerical;
        wid2 = wid2 + numerical;

        if (wid2 < window_wid) {
            wid2 = window_wid;
            left = 0;
            $("#tab").css("left", left);
            $("#tab").css("width", wid2);
        } else if (wid2 > wid) {
            wid2 = wid;
            left = -(wid - window_wid);
            $("#tab").css("left", left);
            $("#tab").css("width", wid2);
        } else {
            $("#tab").css("left", left);
            $("#tab").css("width", wid2);
        }

    }

    $(function () {

        $w.upLoginCookieTime();
        var url = window.location.href;
        var ishome = true;
        if (url.indexOf("we/product/wesubject") != -1) {
            var clscode = getQueryString("channelcode");
            $("#top" + clscode).parents(".aui-tab-item").addClass("aui-active");
            ishome = false;
        } else if (url.indexOf("we/product/index") != -1) {
            $("#tophome").parents(".aui-tab-item").addClass("aui-active");
        }

        initTab();

    });
</script>